<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>bbs</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <style>
        body {
            font-family: Arial, sans - serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        form {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input {
            width: 100%;
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        button {
            background-color: #007BFF;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <form id="loginForm">
        <label for="username">用户名：</label>
        <input type="text" id="username" placeholder="请输入用户名">
        <label for="password">密码：</label>
        <input type="password" id="password" placeholder="请输入密码">
        <button type="button" id="loginButton">登录</button>
        <button type="button" id="registerButton">注册</button>
    </form>
    <!-- 添加模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">注册</h4>
                    <span id="ShowTip" style="color: red;"></span>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="inputName" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputName" placeholder="请输入用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="file" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputPassword01" placeholder="请输入密码">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="upload" onclick="subData()">提交</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            // 登录按钮点击事件
            $('#loginButton').click(function () {
                Login();
            });
            // 注册按钮点击事件
            $('#registerButton').click(function () {
                $('#myModal').modal('show');
            });
        });

        function Login() {
            //收集用户信息
            console.log("进入subData函数");
            //收集用户信息
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            //判断用户表输入是否为空
            if (username == "" || password == "") {
                document.getElementById("ShowTip").innerHTML = '请完善需要填写的字段';
                return;
            }
            //把提示信息的位置清空
            document.getElementById("ShowTip").innerHTML = '';
            //组织JSON对象
            let user = { "username": username, "password": password };
            //向后台提交数据
            $.ajax({
                url: 'http://localhost:8080/api/users/login',//后台接口
                type: 'post',//后台接口的请求方式
                dataType: 'JSON',
                contentType: 'application/json',
                data: JSON.stringify(user),//JSON对象转为JSON对象
                success: function (res) {
                    if (res.code == 200) {
                        document.getElementById("ShowTip").innerHTML = '登录成功';
                        document.getElementById("ShowTip").innerHTML = res.message;
						window.location.href = "index.html";
                    }
                },
                error: function (res) {
                    console.log(res);
                }
            });
        }

        function subData() {
            // 处理注册提交逻辑
            var username1 = document.getElementById("inputName").value;
            var password1 = document.getElementById("inputPassword01").value;
			
            if (username1 == "" || password1 == "") {
                document.getElementById("ShowTip").innerHTML = '请完善需要填写的字段';
                return;
            }
            //把提示信息的位置清空
            document.getElementById("ShowTip").innerHTML = '';
            //组织JSON对象
            let user = { "username": username1, "password": password1 };
			console.log(user)
            //向后台提交数据
            $.ajax({
                url: 'http://localhost:8080/api/users/register',//后台接口
                type: 'post',//后台接口的请求方式
                dataType: 'JSON',
                contentType: 'application/json',
                data: JSON.stringify(user),//JSON对象转为JSON对象
                success: function (res) {
                    if (res.code == 200) {
                        document.getElementById("ShowTip").innerHTML = '注册成功';
						//关闭模态框
						$('#myModal').modal('hide')
                    }
                },
                error: function (res) {
                    console.log(res);
                }
            });
        }
    </script>
</body>

</html>